import React, { Component } from "react";
import { nanoid } from "nanoid";

import "./index.css";

export default class Header extends Component {
	handleKeyUp = (event) => {
		const { target, keyCode } = event;
		const { addTodo } = this.props;
		if (keyCode !== 13) {
			return;
		}
		if (target.value.trim() === "") {
			alert("输入不能为空");
			target.value = "";
			return;
		}

		const newTodo = { id: nanoid(), name: target.value, done: false };
		addTodo(newTodo);
		// value 无效，必须 target.value
		target.value = "";
	};

	render() {
		return (
			<div className="todo-header">
				<input
					onKeyUp={this.handleKeyUp}
					type="text"
					placeholder="请输入你的任务名称，按回车键确认"
				/>
			</div>
		);
	}
}
